<!--
 * @Description: 
 * @Date: 2023-02-23 18:06:20
 * @LastEditors: czp
 * @LastEditTime: 2023-03-08 10:25:43
-->
<template>
	<div class="jing-dian">
		<!-- 特色景点 -->
		<div class="search">
			<p class="title">荆竹特色景点</p>
			<el-form label-width="auto" inline>
				<el-form-item label="关键字">
					<el-input placeholder="搜索内容">
						<template #append>
							<el-button class="s-btn" color="#8A1313">
								<template #icon> <IEpSearch /> </template>
							</el-button>
						</template>
					</el-input>
				</el-form-item>
			</el-form>
		</div>
		<div class="list">
			<VideoCard :video="item" v-for="(item, index) in list" :key="index" />
		</div>

		<!-- 周边景点 -->
		<div class="search">
			<p class="title">荆竹周边景点</p>
		</div>
		<div class="list">
			<VideoCard :video="item" v-for="(item, index) in list1" :key="index" />
		</div>
	</div>
</template>
<script setup lang="ts" name="JingDian">
import VideoCard from "~C/VideoCard/index.vue";
import { useBaseStore } from "@/store/base";

const { cosPrefix } = useBaseStore();
const list = [
	{ title: "俯瞰荆竹", img: cosPrefix + "three-level/xiangye/jingdian/tese/1.png", src: cosPrefix + "three-level/xiangye/jingdian/tese/V1.mp4" },
	{ title: "归原茶馆1", img: cosPrefix + "three-level/xiangye/jingdian/tese/2.png", src: cosPrefix + "three-level/xiangye/jingdian/tese/V2.mp4" },
	{ title: "荆竹雪景", img: cosPrefix + "three-level/xiangye/jingdian/tese/3.png", src: cosPrefix + "three-level/xiangye/jingdian/tese/V3.mp4" },
	{ title: "归原乡宿", img: cosPrefix + "three-level/xiangye/jingdian/tese/4.png", src: cosPrefix + "three-level/xiangye/jingdian/tese/V4.mp4" },
	{ title: "乡野写生 ", img: cosPrefix + "three-level/xiangye/jingdian/tese/5.png", src: cosPrefix + "three-level/xiangye/jingdian/tese/V5.MP4" },
	{ title: "露营基地", img: cosPrefix + "three-level/xiangye/jingdian/tese/6.png", src: cosPrefix + "three-level/xiangye/jingdian/tese/V6.mp4" },
	{ title: "亲子乐园", img: cosPrefix + "three-level/xiangye/jingdian/tese/7.png", src: cosPrefix + "three-level/xiangye/jingdian/tese/V7.mp4" },
	{ title: "归原茶馆", img: cosPrefix + "three-level/xiangye/jingdian/tese/8.png", src: cosPrefix + "three-level/xiangye/jingdian/tese/V8.mp4" }
];

const list1 = [
	{
		title: "懒坝",
		img: cosPrefix + "three-level/xiangye/jingdian/zhoubian/1.png",
		src: cosPrefix + "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangye/jingdian/zhoubian/V1.mp4"
	},
	{
		title: "龙水峡地缝",
		img: cosPrefix + "three-level/xiangye/jingdian/zhoubian/2.png",
		src: cosPrefix + "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangye/jingdian/zhoubian/V2.mp4"
	},
	{
		title: "树顶漫步",
		img: cosPrefix + "three-level/xiangye/jingdian/zhoubian/3.png",
		src: cosPrefix + "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangye/jingdian/zhoubian/V3.mp4"
	},
	{
		title: "天生三桥",
		img: cosPrefix + "three-level/xiangye/jingdian/zhoubian/4.png",
		src: cosPrefix + "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangye/jingdian/zhoubian/V4.mp4"
	},
	{
		title: "仙女山",
		img: cosPrefix + "three-level/xiangye/jingdian/zhoubian/5.png",
		src: cosPrefix + "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangye/jingdian/zhoubian/V5.mp4"
	},
	{
		title: "仙女山度假区",
		img: cosPrefix + "three-level/xiangye/jingdian/zhoubian/6.png",
		src: cosPrefix + "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangye/jingdian/zhoubian/V6.mp4"
	}
];
</script>
<style lang="scss" scoped>
.jing-dian {
	padding: 40px 320px;
}
.search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	color: #000000;
	.title {
		font-size: 28px;
		color: #8a1313;
	}
	.s-btn {
		color: #ffffff;
		background-color: #8a1313;
	}
}
.list {
	display: flex;
	flex-wrap: wrap;
	padding-top: 0;
}
</style>
